<!--录入补缓考成绩-->
<template>
  <div class="assessment-container">
    <div class="search-container">
      <div class="search-container-left">
        <div class="search-container-item">
          <span>补考学期:</span>
          <el-select
            v-model="bkxueqi"
            style="width: 92px"
            size="mini"
            placeholder="请选择"
          >
            <el-option
              v-for="item in xqList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>

        <div class="search-container-item">
          <span>课程名称：</span>
          <el-input
            style="width: 152px"
            size="mini"
            placeholder="请输入内容"
            v-model="coursename"
          ></el-input>
        </div>
        <div class="search-button" @click="queryPostList">
          <img src="../../../assets/assessment/icon-search.png" alt=""/>
          <span>查询</span>
        </div>
      </div>
    </div>
    <div class="plan-entry-table-container">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        class="table-data"
        row-class-name="row-class"
        cell-class-name="cell-class"
        header-row-class-name="header-row-class"
        header-cell-class-name="header-cell-class"
      >
        <el-table-column
          prop="lrcj"
          label="录入成绩"
          width="141"
          align="center"
          class-name=""
          label-class-name=""
        >
          <template slot-scope="scope">
            <div class="bk-lucj-import-button" @click="toMakeupScoreEntry(scope.$index)">
              <img
                src="../../../assets/assessment/icon-plan-record-detail.png"
                alt=""
              />
              <span>录入</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="dc" label="导出" width="226" align="center">
          <template slot-scope="scope">
            <div class="bk-lucj-expot-button" @click="getoutBKallCJDD(scope.$index)">
              <img src="../../../assets/assessment/bk-export.png" alt=""/>
              <span>导出补缓考成绩单</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="xueqi" label="学期" width="100" align="center">
        </el-table-column>
        <el-table-column
          prop="courseno"
          label="课程编号"
          width="141"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="coursename"
          label="课程名称"
          width="166"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="jxclasses" label="教学班" width="126" align="center">
        </el-table-column>
        <el-table-column
          prop="professionaldivisions"
          label="专业班次"
          width="446"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="yl" label="应录" width="130" align="center">
        </el-table-column>
        <el-table-column prop="wl" label="未录" width="130" align="center">
        </el-table-column>
        <el-table-column prop="yil" label="已录" width="126" align="center">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {queryListl, conditionPostListl} from "../../../api/courseAchievement/entryResults";
import {saveBKallCJD} from "@/api/courseAchievement/printEntry";

export default {

  data() {
    return {
      planid:'',
      bkxueqi: "2020春",
      xqList: [
        {
          value: "2020春",
          label: "2020春",
        },
        {
          value: "2021夏",
          label: "2021夏",
        },
      ],
      tableData: [
      ],
      coursename: ''
    };
  },
  methods: {

    //导出补缓考成绩
    getoutBKallCJDD(index){
      let el = this
      let planid = this.tableData[index].planid
      let href = window._CONFIG.courseurl + `/scorequery/outBKallCJD?planids=${planid}`;
      let alink = document.createElement('a');
      el.$message({
        showClose: true,
        message: "下载中，请稍后",
        type: "success",
      });
      alink.style.display = 'none';
      alink.download = '按课程导出.word'; //下载后文件名
      alink.href = href
      document.body.appendChild(alink);
      alink.click();
      document.body.removeChild(alink); //下载完成移除元素

    },

    toMakeupScoreEntry(index) {
      let planid = this.tableData[index].planid
      let courseno = this.tableData[index].courseno
      this.$router.push({path: "/teacher/courseAchievement/makeupScoreEntry", query: {planid: planid,courseno:courseno}});
    },
    queryList: function () {
      let obj={
        bkxueqi:'2020春'
      }
      return new Promise(() => {
        queryListl(obj).then(res => {
          if(res.data.code==200){
            this.tableData = res.data.data;
            let arr = [];
            let b;
            for (let a = 0; a < this.tableData.length; a++) {
              arr = this.tableData[a].oldview.split("/")
              for (let i = 0; i < arr.length; i++) {
                for (let t = i + 1; t < arr.length; t++) {
                  this.tableData[a].wl = arr[i];
                  this.tableData[a].yl = arr[t];
                }
              }
            }
          }
        })
      })
    },

    queryPostList: function () {

      let obj = {
        bkxueqi: this.bkxueqi,
        coursename: this.coursename,
      }
      return new Promise(() => {
        conditionPostListl(obj).then(res => {
          this.tableData = res.data.data
          let arr = [];
          let b;
          for (let a = 0; a < this.tableData.length; a++) {
            arr = this.tableData[a].oldview.split("/")
            for (let i = 0; i < arr.length; i++) {
              for (let t = i + 1; t < arr.length; t++) {
                this.tableData[a].wl = arr[i];
                this.tableData[a].yl = arr[t];
              }
            }
          }
        })
      })
    }
  },
  mounted() {
    this.queryList();
  },
};
</script>
<style lang="less" scoped>
.plan-entry-table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .export-button {
    background: #fff6ef;
    border: 1px solid #f3b815;
    width: auto;
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;

    > span {
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #f3b815;
    }

    > img {
      width: 16px;
      height: 16px;
      margin-right: 5px;
    }
  }

  .bk-lucj-import-button {
    .export-button;
    width: 70px;
    background: #f1fff8;
    border: 1px solid #02c86c;
    box-sizing: border-box;
    margin: 0 auto 12px;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #02c86c;
    }
  }

  .bk-lucj-expot-button {
    .export-button;
    width: 156px;
    background: #fef1e8;
    border: 1px solid #f86900;
    box-sizing: border-box;
    margin: 0 auto 12px;

    &:last-child {
      margin-bottom: 0px;
    }

    > span {
      color: #f86900;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/entry-results.less";

.plan-entry-table-container {
  margin-top: 30px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}
</style>
